<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加服务</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>
    首页
    <span class="c-gray en">&gt;</span>
    基础设置
    <span class="c-gray en">&gt;</span>
    服务组合配置
    <span class="c-gray en">&gt;</span>
    添加服务组合
</nav>
<div class="page-container">
    <div class="form-unit">服务项目树结构</div>
    <ul id="treeDemo"  class="ztree"></ul>

    <div class="form-unit">基本信息</div>
    <form  method="post" class="form form-horizontal" id="merchant-serviceBag-form-add">
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>服务组合名称：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="form-control" value="" placeholder="必填项" id="BasicServiceBagAddServiceName" name="servicePackageName">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>服务组合价格：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="form-control" value="" placeholder="必填项" name="price" id="BasicServiceBagAddPrice">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>打折价格：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="text" class="form-control" value="" placeholder="必填项" name="discountPrice" id="BasicServiceBagAddDiscountPrice">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>服务组合类型：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <select name="BasicServiceBagAddServiceType" id="BasicServiceBagAddServiceType">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3">服务描述：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <textarea id="BasicServiceBagAddServicePackageDesc" name="servicePackageDesc" cols="85" rows="4" class="textarea valid" placeholder="请输入服务的描述..."></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3">图片上传：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <div class="uploader-list-container">
                    <input id="addManageImg" name="file[]" multiple type="file" class="file-loading"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input onclick="merchantBasicServiceBagAddFun.submitAnaysis();return false;" class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"/>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    /*服务礼包，添加页面 merchantBasicServiceBagAddFun*/
    var merchantBasicServiceBagAddFun;

    merchantBasicServiceBagAddFun={
        init : function () {
            let _this = this;
            _this.bootstrapvalidatorForm();
            _this.serviceType(1);

//            /**************加载select2**********/
//            $("#BasicServiceBagAddServiceType").select2({
//                 width : '195px'
//            });

            //加载可选服务小类型
            $.ajax({
                type: "GET",
                url: "biz/getServiceTypeByBizId",
                dataType: "json",
                async: false,
                success: function(data){
                    if(data.state){
                        $("#BasicServiceBagAddServiceType").select2({
                            data: data.data,
                            placeholder:'请选择类型',
                            width : '195px'
                        });
                        $('#BasicServiceBagAddServiceType').on('select2:select', function (e) {
                            $(e.target).siblings('I').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok').show().siblings('SMALL').hide().parents('.form-group').removeClass('has-error').addClass('has-success')
                        });
                        $('#BasicServiceBagAddServiceType').on('select2:unselect', function (e) {
                            $(e.target).siblings('I').removeClass('glyphicon glyphicon-ok').addClass('glyphicon glyphicon-remove').show().siblings('SMALL').show().parents('.form-group').removeClass('has-success').addClass('has-error')
                        });
                    }
                },
                error:function () {
                    alert("error2");
                }
            });

            $('#BasicServiceBagAddServiceType').on('select2:select', function (e) {
                let data = e.params.data;
                _this.serviceType(data.id);
            });

        },
        //提交
        submitAnaysis : function () {
            //bootstrap验证
            var bootstrapValidator = $("#merchant-serviceBag-form-add").data('bootstrapValidator');
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid())
                $("#merchant-serviceBag-form-add").submit();
            else return;

            //获取选中的tree
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
            //判断不能为空
            if(nodes.length == 0){
                layer.msg("请选择服务项目！", {icon: 0});
                return;
            }
            var array = "";
            for(var i=0;i<nodes.length;i++){
                if(array != ""){
                    array += ",";
                }
                array += nodes[i].id;
            }

            var myselect=document.getElementById("BasicServiceBagAddServiceType");
            var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
            var selectIndex = myselect.options[index].value;
            var price = $("#BasicServiceBagAddPrice").val()*100;
            var discountPrice = $("#BasicServiceBagAddDiscountPrice").val()*100;
            $.ajax({
                type: "GET",
                url: "biz/insertBizServicePackage",
                data: {array:array,servicePackageName:$("#BasicServiceBagAddServiceName").val(),serviceType:selectIndex,price:price,
                       discountPrice:discountPrice,servicePackageDesc:$("#BasicServiceBagAddServicePackageDesc").val()},
                dataType: "json",
                success: function(data){
                    //state为true，新增成功
                    if(data.state){
                        if (isChange) {//有图片上传的
                            extData = {"typeId": "service_package_id", "relateId": data.data.servicePackageId};
                            $("#addManageImg").fileinput("upload");
                        }

                        layer.msg(data.message, {icon: 1});
                        //关闭新增窗口
                        removeIframe();

                        //涮新一次
                        $('#basic-serviceBag').bootstrapTable("refresh");
                    }else {
                        layer.msg(data.message, {icon: 0});
                    }

                },
                error:function () {
                    alert("error");
                }
            });
        },
        //bootstrap验证
        bootstrapvalidatorForm: function () {
            $('#merchant-serviceBag-form-add').bootstrapValidator({
                message: 'This value is not valid',
                excluded : [':disabled'],
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    servicePackageName: {
                        validators: {
                            notEmpty: {
                                message: '服务组合名称不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 50,
                                message: '服务组合名称长度必须在2到50位之间'
                            }
                        }
                    },
                    price: {
                        validators: {
                            notEmpty: {
                                message: '服务组合价格不能为空'
                            },
                            regexp: {
                                regexp: /^((^([1-9]\d*))|^0)(\.\d{1,2})?$|(^[-]0\.\d{1,2}$)$/,
                                message: '服务单价格式不正确'
                            },
                            stringLength: {
                                min: 1,
                                max: 5,
                                message: '服务组合价格长度必须在1到5位之间'
                            }
                        }
                    },
                    discountPrice: {
                        validators: {
                            notEmpty: {
                                message: '打折价格不能为空'
                            },
                            regexp: {
                                regexp: /^((^([1-9]\d*))|^0)(\.\d{1,2})?$|(^[-]0\.\d{1,2}$)$/,
                                message: '打折价格格式不正确'
                            },
                            stringLength: {
                                min: 1,
                                max: 5,
                                message: '打折价格长度必须在1到5位之间'
                            }
                        }
                    }
                }
            });
        },
        //加载下方可选择的服务树
        serviceType: function (index) {
            $.ajax({
                type: "get",
                url: "biz/getServiceTree",
                data: {serviceType:index},
                dataType: "json",
                success: function (data) {
                    if(data.state){
                        var merchantAddSetting = {
                            check: {
                                enable: true
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            }
                        };
                        $.fn.zTree.init($("#treeDemo"), merchantAddSetting, data.data);
                        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        treeObj.expandAll(true);
                        //父节点不能选择
                        var nodes = treeObj.transformToArray(treeObj.getNodes());
                        for (var i = 0, l = nodes.length; i < l; i++) {
                            if (nodes[i].id < 100) {
                                treeObj.setChkDisabled(nodes[i], true);
                            }
                        }

                    }

                },
                error: function () {
                    alert("error");
                }
            });
        }
    };

    var extData;
    var isChange;
    $("#addManageImg").fileinput({
        language: "zh", //设置语言
        uploadUrl: "file/upload", //上传的地址
        allowedFileExtensions: ["jpg", "png", "gif"],//接收的文件后缀
        maxFileCount: 1,
        overwriteInitial: false,
        initialCaption: "请上传一张服务图片",//文本框初始话value
        showUpload: false,//是否显示上传按钮
        showRemove: false,//是否显示删除按钮
        showCaption: true,//是否显示输入框
        browseClass: "btn btn-primary", //按钮样式
        enctype: "multipart/form-data",
        showPreview: true,
        uploadAsync: false,//多图片一次上传
        maxSize: 1024,//单位kb
        allowedPreviewTypes: ["image"],
        uploadExtraData: function () {
            return extData;
        }
    }).on("fileuploaded", function (event, data) {
        if (data.response.success == 0) {
            base.success("新增成功！");
            base.closeTab("新增商品");
        }
        else {
            base.error("新增成功，图片上传失败");
        }
    }).on("change", function (event) {
        isChange = true;
    }).on("fileloaded", function () {
        // $("#form-member-add").find(".file-thumbnail-footer").remove();
        // $("#form-member-add").find(".file-drop-zone-title").remove();
    });
    merchantBasicServiceBagAddFun.init();
</script>
</body>
</html>